<template>
  <common-page title="重置密码">
    <el-steps :active="stepActive" finish-status="success" simple>
      <el-step title="填写新密码"></el-step>
      <el-step title="完成重置"></el-step>
    </el-steps>
    <el-form v-if="stepActive === 0" ref="form" :label-width="120" :model="form" :rules="rules">
      <el-form-item label="系统租户" prop="tenantName">
        <el-select v-model="form.tenantName" style="width: 100%;">
          <el-option v-for="item in tenantNameList" :label="item.tenantName" :value="item.tenantName"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="登录账号" prop="username">
        <el-input v-model="form.username" placeholder="请输入登录账号"></el-input>
        <div class="el-form-item-msg">请输入注册时填写的登录账号</div>
      </el-form-item>
      <el-form-item label="邮箱账号" prop="email">
        <el-input v-model="form.email" placeholder="请输入邮箱账号"></el-input>
        <div class="el-form-item-msg">请输入注册时填写的邮箱账号</div>
      </el-form-item>
      <el-form-item label="邮箱验证码" prop="captchaCode">
        <div class="yzm">
          <el-input v-model="form.captchaCode" placeholder="请输入6位邮箱验证码"></el-input>
          <el-button :disabled="disabled" @click="getCaptchaCode">获取验证码<span v-if="disabled"> ({{ time }})</span>
          </el-button>
        </div>
      </el-form-item>
      <el-form-item label="新密码" prop="newPassword">
        <el-input v-model="form.newPassword" placeholder="请输入新密码" show-password></el-input>
        <div class="el-form-item-msg">请输入包含英文、数字的8位以上密码</div>
      </el-form-item>
      <el-form-item label="确认新密码" prop="surePassword">
        <el-input v-model="form.surePassword" placeholder="请再一次输入新密码" show-password></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="save">提交</el-button>
      </el-form-item>
    </el-form>
    <el-result v-if="stepActive===1" icon="success" sub-title="请牢记自己的新密码,返回登录后使用新密码登录" title="密码重置成功">
      <template #extra>
        <el-button type="primary" @click="backLogin">返回登录</el-button>
      </template>
    </el-result>
  </common-page>
</template>

<script>
import commonPage from './components/commonPage'

export default {
  components: {
    commonPage
  },
  data() {
    return {
      stepActive: 0,
      form: {
        tenantName: "",
        username: "",
        email: "",
        captchaCode: "",
        newPassword: "",
        surePassword: ""
      },
      rules: {
        tenantName: [
          {required: true, message: '请选择系统租户'}
        ],
        username: [
          {required: true, message: '请输入登录账号'}
        ],
        email: [
          {required: true, message: '请输入邮箱账号'}
        ],
        captchaCode: [
          {required: true, message: '请输入短信验证码'}
        ],
        newPassword: [
          {required: true, message: '请输入新的密码'}
        ],
        surePassword: [
          {required: true, message: '请再次输入新的密码'},
          {
            validator: (rule, value, callback) => {
              if (value !== this.form.newPassword) {
                callback(new Error('两次输入密码不一致'));
              } else {
                callback();
              }
            }
          }
        ],
      },
      disabled: false,
      time: 0,
      tenantNameList: []
    }
  },
  created() {
    this.$API.tenant.listTenantName.get().then(response => {
      if (response.status) {
        this.tenantNameList = response.data
        if (this.tenantNameList.length !== 0) {
          this.form.tenantName = this.tenantNameList[0].tenantName
        }
      }
    })
  },
  mounted() {

  },
  methods: {
    getCaptchaCode() {
      if (!this.form.email) {
        this.$alert("邮箱不能为空", "提示", {type: 'error'});
        return;
      }
      this.$API.captcha.createResetPasswordCaptcha.get(this.form.email).then(response => {
        if (response.status) {
          this.$message.success(response.msg)
          this.disabled = true
          this.time = 60
          let t = setInterval(() => {
            this.time -= 1
            if (this.time < 1) {
              clearInterval(t)
              this.disabled = false
              this.time = 0
            }
          }, 1000)
        }
      })
    },
    async save() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.$API.user.updatePassword.put({
            tenantName: this.form.tenantName,
            username: this.form.username,
            email: this.form.email,
            captchaCode: this.form.captchaCode,
            newPassword: this.$TOOL.crypto.rsaEncrypt(this.form.newPassword),
            surePassword: this.$TOOL.crypto.rsaEncrypt(this.form.surePassword)
          }).then(response => {
            if (response.status) {
              this.$message.success(response.msg)
              this.stepActive = 1
            } else {
              this.$alert(response.msg, "提示", {type: 'error'});
            }
          })
        }
      });
    },
    backLogin() {
      this.$router.push({
        path: '/login'
      })
    }
  }
}
</script>
